<template>
  <div class="box-shadow">
    <el-tabs v-model="resourceType">
      <el-tab-pane label="氧气" name="0">
        <oxygen v-if="resourceType == '0'"></oxygen>
      </el-tab-pane>
      <el-tab-pane label="一氧化碳" name="1">
        <carbon v-if="resourceType == '1'"></carbon>
      </el-tab-pane>
      <el-tab-pane label="甲烷" name="2">
        <methane v-if="resourceType == '2'"></methane>
      </el-tab-pane>
      <el-tab-pane label="二硫化氢" name="3">
        <HydrogSulfid v-if="resourceType == '3'"></HydrogSulfid>
      </el-tab-pane>
      <el-tab-pane label="温度" name="4">
        <temp v-if="resourceType == '4'"></temp>
      </el-tab-pane>
      <el-tab-pane label="湿度" name="5">
        <humidity v-if="resourceType == '5'"></humidity>
      </el-tab-pane>
      <el-tab-pane label="烟雾" name="6">
        <smog v-if="resourceType == '6'"></smog>
      </el-tab-pane>
      <el-tab-pane label="PM1.0" name="7">
        <PM1 v-if="resourceType == '7'"></PM1>
      </el-tab-pane>
      <el-tab-pane label="PM2.5" name="8">
        <PM2 v-if="resourceType == '8'"></PM2>
      </el-tab-pane>
      <el-tab-pane label="PM10" name="9">
        <PM10 v-if="resourceType == '9'"></PM10>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import oxygen from "./components/oxygen.vue";
import carbon from "./components/carbon.vue";
import methane from "./components/methane.vue";
import HydrogSulfid from "./components/HydrogSulfid.vue";
import temp from "./components/temp.vue";
import humidity from "./components/humidity.vue";
import smog from "./components/smog.vue";
import PM1 from "./components/PM1.vue";
import PM2 from "./components/PM2.vue";
import PM10 from "./components/PM10.vue";

export default {
  name: "Resource",
  components: {
    oxygen,
    carbon,
    methane,
    HydrogSulfid,
    temp,
    humidity,
    smog,
    PM1,
    PM2,
    PM10,
  },
  data() {
    return {
      resourceType: "0",
    };
  },
  created() {},
  methods: {},
};
</script>
<style scoped lang="scss">
::v-deep {
  .el-tabs--top .el-tabs__item {
    padding: 0 30px;
  }
}
</style>
